<template>
  <!-- -----安全库存 ------ -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="formInline.key" placeholder="请输入合作公司" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="incolumn_from">
      <el-table :data="tableData" style="width: 100%;" :height="autoHeightTable" stripe>
        <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="materialno" label="原料编号" align="center" width="200"></el-table-column>
        <el-table-column prop="materialname" label="原料名称" align="center"></el-table-column>
        <el-table-column prop="materialnametype" label="类型" align="center"></el-table-column>
        <el-table-column prop="inventory" label="库存数量" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="address" label="存放位置" align="center"></el-table-column>
        <el-table-column prop="maxinventory" label="库存上限" align="center"></el-table-column>
        <el-table-column prop="mininventory" label="库存下限" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="Apply(scope.row.materialno)" type="warning" size="small">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ============================================================ -->
      <!--  ========= --- 编辑弹框 ============= --- -->
      <!-- ============================================================ -->
      <el-dialog :visible.sync="dialogTableVisiblea" :modal-append-to-body="false" width="800px">
        <div class="herd_bud"></div>
        <div class="from_cg">库存信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form :model="formInline" class="demo-form-inline" label-width="83px">
                <el-form-item label="库存上限">
                  <el-input v-model="formInline.max" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInline" class="demo-form-inline" label-width="83px">
                <el-form-item label="库存下限">
                  <el-input v-model="formInline.min" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInline" class="demo-form-inline" label-width="83px">
                <el-form-item label="供应商">
                  <el-select v-model="value">
                    <el-option
                      v-for="item in options"
                      :key="item.no"
                      :label="item.name"
                      :value="item.no"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInline" class="demo-form-inline" label-width="83px">
                <el-form-item label="起订量">
                  <el-input v-model="formInline.bianhao" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <br />
          <p class="Purchase_Division"></p>
          <div class="from_towbs">
            <el-button @click="Confrim" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisiblea = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      options: [],
      value: "",
      dialogTableVisiblea: false,
      formInline: {
        key: ""
      },
      tableData: [],
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      and: ""
    };
  },
  created() {
    this.getData(0);
    this.getDatas();
    this.getDetelBy();
  },
  methods: {
    //供应商接口
    getDetelBy() {
      axios("/apis/PurchasingManagement.asmx/Get?index=1").then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.options = list;
      });
    },
    //表单接口
    getData(page) {
      var obj = {
        start: this.start,
        end: this.end,
        key: this.formInline.key,
        pn: page,
        PerPageSize: 10
      };
      var objs = JSON.stringify(obj);
      console.log(objs);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=4&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.tableData = [];
        this.tableData = list;
      });
    },

    getDatas() {
      var obj = {
        start: "",
        end: "",
        key: this.formInline.key,
        pn: 0,
        PerPageSize: 10000
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=4&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.total = list.length;
      });
    },
    //设置接口

    // 日期改变
    chage(e) {
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      this.getData(0);
    },
    //分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    },
    //设置弹框
    Apply(materialno) {
      this.dialogTableVisiblea = true;
      this.and = materialno;
    },
    //设置--------------确认
    Confrim() {
      var obj = {
        rawno: this.and,
        max: this.formInline.max,
        min: this.formInline.min
      };
      console.log(111111111111111111111111111111);
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/Save_Purchase?index=4&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.formInline.max = this.tableData.maxinventory;
        this.formInline.min = this.tableData.mininventory;
      });
      this.dialogTableVisiblea = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
//第一块儿
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 97%;
  background-color: white;
  padding-top: 10px;
}
.incolumn_second {
  margin-left: 20px;
  color: $fontcolor;
  line-height: 80px;
}
.incolumn_second1 {
  margin-left: 30px;
}
.incolumn_second2 {
  margin-left: 10px;
}
.btn_sx {
  margin-left: 5px;
}
.block {
  margin-top: -10px;
  margin-left: 20px;
  cursor: pointer;
}
.block_Math {
  cursor: pointer;
}
//第二块
.incolumn_from {
  margin-top: 15px;
  margin-left: 15px;
  width: 98%;
  height: 100%;
}
.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(52, 144, 231);
}
.from_cg {
  font-size: $font-size-medium-x;
  font-weight: bold;
  margin-top: -20px;
  margin-left: 10px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
.demo-form-inline {
  margin-top: 10px;
}

.from_towbs {
  margin-top: 10px;
  text-align: center;
}
</style>